<template>
	<view class="searchMassage">
		<uni-nav-bar v-if="isshowNavBar==1"  class="navbarbox" height="128rpx" backgroundColor="#FFFFFF" :border="false" :fixed="true"
			leftWidth="0" rightWidth="0">

			<view class="searchMassageNav">
				<view class="view-tab" v-for="(item, key, index) in tabList" :key="key" @tap="onClickTopTab(index)">
					<text class="text-tab" :class="index == selectIndex ? 'select':''">{{item}}</text>
				</view>

			</view>
			<view class="view-line-tab animation" :style="lineStyle"></view>
		</uni-nav-bar>

		<view class="huadongBOX" :style="dynamicStyle">

			<scroll-view scroll-y="true" class="content" :enhanced="true" :bounces="false" :show-scrollbar="false"
				
				@refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
				@refresherabort="onAbort">

				<swiper class="swiper" circular :duration="500" :current="selectIndex" @change="changeIndicatorDots">
					<swiper-item v-if="hotTypeData==''">
						<allMassage :inputValue="inputValue" :datanumber="3" ></allMassage>
					</swiper-item>
					<swiper-item  v-if="hotTypeData=='school'||hotTypeData==''">
						<schoolMassage :inputValue="inputValue" @isLookMet="isLookMet" :isShowData="isshowNavBar"></schoolMassage>
					</swiper-item>
					<swiper-item v-if="hotTypeData=='major'||hotTypeData==''" >
						<majorMassage :inputValue="inputValue" @isLookMet="isLookMet" :isShowData="isshowNavBar"></majorMassage>
					</swiper-item>
					<swiper-item v-if="hotTypeData=='job'||hotTypeData==''">
						<jobMassage :inputValue="inputValue" @isLookMet="isLookMet" :isShowData="isshowNavBar"></jobMassage>
					</swiper-item>
					<swiper-item v-if="hotTypeData=='news'||hotTypeData==''">
						<articleMassage :inputValue="inputValue"  @isLookMet="isLookMet" :isShowData="isshowNavBar">
						</articleMassage>
					</swiper-item>
				</swiper>

			</scroll-view>



		</view>


	</view>
</template>

<script>
	import request from '@/common/request/api.js'
	import allMassage from "./searchMassageBox/allMassage.vue"
	import schoolMassage from "./searchMassageBox/schoolMassage.vue"
	import majorMassage from "./searchMassageBox/majorMassage.vue"
	import jobMassage from "./searchMassageBox/jobMassage.vue"
	import articleMassage from "./searchMassageBox/articleMassage.vue"
	export default {
		components: {
			allMassage,
			schoolMassage,
			majorMassage,
			jobMassage,
			articleMassage
		},
		computed: {
		    dynamicStyle() {
		      return {
		        height: this.swiperHight
		      }
		    }
		  },
		props: {
			inputValue: {
				type: String,
				default: ''
			},
			hotType: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				tabList: {
					"1": "综合",
					"2": "院校",
					"3": "专业",
					"4": "职业",
					"5": "文章"
				},
				selectIndex: 0, //轮播图位置
				lineStyle: "margin-left: calc(10% - 12rpx)",
				inputdata: '', //input值
				isLook: {
					schoolMassage: 1,
					majorMassage: 1,
					jobMassage: 1,
					articleMassage: 1
				},
				hotTypeData: '',
				isshowNavBar:1,//是否显示第二导航栏
				swiperHight:"calc(100vh - 148rpx - 148rpx)",
			}
		},

		methods: {
			isLookMet(data) {
				this.isLook.data = 2

			},
			changeIndicatorDots(e) {
				this.selectIndex = e.detail.current;
			},
			// 点击分页栏
			onClickTopTab(index) {
				this.selectIndex = index
			},
		
			// 下拉刷新函数
			onPulling(e) {
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;

					this._freshing = false;
		
			},
			onRestore() {
			},
			onAbort() {
			}

		},
		watch: {
			inputValue: {
				handler() {
					this.inputdata = this.inputValue
					this.isLook = {
						schoolMassage: 1,
						majorMassage: 1,
						jobMassage: 1,
						articleMassage: 1
					}
				},
				deep: true,
				immediate: true
			},
			hotType: {
				handler() {
					this.hotTypeData = this.hotType
					switch (this.hotTypeData) {
						case "school": this.tabList={"1": ""};this.isshowNavBar=2;this.swiperHight="calc(100vh - 148rpx)" ;break;
						case "major": this.tabList={"1": ""};this.isshowNavBar=2;this.swiperHight="calc(100vh - 148rpx)" ;break;
						case "job": this.tabList={"1": ""};this.isshowNavBar=2;this.swiperHight="calc(100vh - 148rpx)" ;break;
						case "news": this.tabList={"1": ""};this.isshowNavBar=2;this.swiperHight="calc(100vh - 148rpx)" ;break;
											}
			
				},
				deep: true,
				immediate: true
			}

		},
		mounted() {

			this.inputdata = this.inputValue
			this._freshing = false;
		


		},


	}
</script>

<style lang="scss" scoped>
	.searchMassage {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		.navbarbox {
			height: 128rpx;
			flex-shrink: 0;
		}

		.huadongBOX {
			height: calc(100vh - 148rpx - 148rpx);

			.content {
				height: 100%;

				//轮播图
				.swiper {
					height: 100%;
					margin-top: 1rpx;

				}
			}
		}

	}

	.searchMassageNav {
		width: 100vh;
		height: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		position: relative;
		padding: 0rpx;
		z-index: 10;
		top: 2rpx;

	}


	.view-tab {
		display: flex;
		height: 60rpx;
		align-items: center;
		background-color: #fff;
	}

	.text-tab {
		color: #464646;
		font-size: 26rpx;
		font-weight: bold;
		width: 20vw;
		text-align: left;
		height: 60rpx;
		line-height: 60rpx;
	}

	.text-tab.select {
		color: #FF3B0A;
	}

	.view-line-tab {
		position: relative;
		height: 2rpx;
		width: 24rpx;
		background-color: #FF3B0A;
		margin-top: -10rpx;
	}

	.view-line-tab.animation {
		transition-duration: 0.2s;
	}

	.ceshi {
		width: 100vw;
		height: 1rpx;
	}
</style>